<template>
    <div class="container">
        <canvas id="mycanvas" width="500" height="500"></canvas>
        <div class="operations">
            <div v-if="!userInfo.id">
                <input type="text" v-model="loginName"/>
                <input type="button" value="登录" @click="login"/>
            </div>
            <div v-if="userInfo.id">
                当前用户:{{userInfo.name}}
            </div>
            <div v-if="userInfo.id && !table.id">
                <input type="button" value="创建房间" @click="createTable"/>
                <input type="text" v-model="joinTableId"/>
                <input type="button" value="加入房间" @click="joinTable"/>
            </div>
            <div v-if="userInfo.id && table.id">
                当前房间号:{{table.id}}
                <template v-if="gameStatus === 0 || gameStatus==2">
                    <input type="button" value="开始游戏" @click="startGame"/>
                </template>
            </div>
        </div>
    </div>
</template>
<script>
import chessGame from './chessGame'
export default {
  name: 'landing-page',
  data () {
    return {
      websocketurl: 'ws://172.18.1.151:8989/ws',
      ws: null,
      loginName: '',
      userInfo: {
        id: null,
        name: ''
      },
      table: {
        id: ''
      },
      joinTableId: null,
      gameStatus: 0
    }
  },
  components: { },
  mounted () {
    this.log(1)

    console.log(chessGame)
    this.ws = new WebSocket(this.websocketurl)
    this.ws.onopen = function () {

    }
    this.ws.onmessage = this.reciveMsg
    this.ws.onclose = function (evt) {

    }
    this.ws.onerror = function (evt) {

    }
    chessGame.init({
      container: 'mycanvas',
      wsurl: 'ws://172.18.1.151:8989/ws',
      chessApi: this.ws
    })

    chessGame.drawChessBoard()
    console.log('22')
  },
  methods: {
    log () {
      console.log(this.$refs)
      console.log(this.$refs.canvasitem)
    },
    login () {
      chessGame.login(this.loginName)
    },
    createTable () {
      chessGame.createTable()
    },
    startGame () {
      chessGame.startGame()
    },
    joinTable () {
      chessGame.joinTable(this.joinTableId)
    },
    reciveMsg (evt) {
      console.log('evt2')
      let result = JSON.parse(evt.data)
      console.log(result)
      if (result.command === 6) {
        console.log(this)
        this.userInfo.id = result.id
        this.userInfo.name = result.name
        console.log(result.id)
        console.log(result.name)
      } else if (result.command === 8) {
        if (result.success) {
          console.log(result.tableId)
          this.table.id = result.tableId
          console.log(this.table)
        }
      } else if (result.command === 12) {
        if (result.success) {
          console.log(result.tableId)
          this.table.id = result.tableId
          console.log(this.table)
          chessGame.setGameStatus(0)
          this.gameStatus = 0
          if (result.joinUser) {
            alert(result.joinUser + '加入了房间')
          }
        }
      } else if (result.command === 9) {
        if (result.success) {
          if (result.color === 1) {
            alert('游戏开始,你的颜色是黑色')
            chessGame.setColor(1)
          } else {
            alert('游戏开始,你的颜色是白色')
            chessGame.setColor(2)
          }
          chessGame.setGameStatus(1)
          this.gameStatus = 1
          chessGame.resetChessBoard()
        }
      } else if (result.command === 14) {
        if (result.success) {
          chessGame.drawChess(result.x, result.y, result.color)
          if (result.winner) {
            if (result.winner === this.userInfo.id) {
              alert('你赢了')
              chessGame.setGameStatus(2)
              this.gameStatus = 2
            } else {
              alert('你输了')
              chessGame.setGameStatus(2)
              this.gameStatus = 2
            }
          }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container{
    display: flex;
}
</style>

